import { useEffect, useState, useCallback, Fragment } from 'react';
import { useParams } from 'react-router-dom';
import { PageHeader, Descriptions, Tabs, Space, message } from 'antd';
import { HeartTwoTone } from '@ant-design/icons';
import { http } from '@/utils/http';
import { HeartIcon } from '@/utils/HeartIcon';
import './index.scss';

export default function Detail() {
  // 从路径params参数中获取文章id
  const { id } = useParams()
  const [previewList, setPreviewList] = useState([])  // 预览文章数据数组
  const [isStar, setIsStar] = useState(false)  // 是否点赞

  // 获取要预览的文章的数据
  const getPreviewList = useCallback(async () => {
    const { data } = await http.get(`/news?id=${id}&_expand=category&_expand=role`)
    data[0].view = data[0].view + 1
    console.log(data[0])
    setPreviewList(data)
    // 浏览量自增
    http.patch(`/news/${id}`, {
      "view": data[0].view
    })
  }, [id])

  useEffect(() => {
    getPreviewList()
  }, [getPreviewList])

  // 定义转化时间戳的函数
  const formatTime = originVal => {
    const dt = new Date(originVal)
    const year = dt.getFullYear()
    const month = (dt.getMonth() + 1 + '').padStart(2, '0')
    const date = (dt.getDate() + '').padStart(2, '0')
    const hour = (dt.getHours() + '').padStart(2, '0')
    const minute = (dt.getMinutes() + '').padStart(2, '0')
    const second = (dt.getSeconds() + '').padStart(2, '0')

    return `${year}-${month}-${date} ${hour}:${minute}:${second}`
  }

  // 点赞 / 取消点赞
  const clickStar = () => {
    if (isStar === false) {
      http.patch(`/news/${id}`, {
        "star": previewList[0].star + 1
      })
        .then(() => {
          setPreviewList([{
            ...previewList[0],
            star: previewList[0].star + 1
          }])
          message.success({
            content: ' 点赞成功！🎉',
            duration: 2,
            icon: '👍'
          })
        })
    } else {
      http.patch(`/news/${id}`, {
        "star": previewList[0].star - 1
      })
        .then(() => {
          setPreviewList([{
            ...previewList[0],
            star: previewList[0].star - 1
          }])
          message.success({
            content: '取消点赞！😈',
            duration: 2,
            icon: <HeartTwoTone twoToneColor="#eb2f96" />
          })
        })
    }
    setIsStar(!isStar)
  }

  return (
    <Fragment>
      {
        previewList[0]
        &&
        <div style={{ height: '100%' }}>
          <PageHeader
            ghost={false}
            onBack={() => window.history.back()}
            title={previewList[0].title}
            subTitle={
              <Space>
                {previewList[0].category.title}
                {
                  isStar ?
                    <HeartIcon style={{ color: 'hotpink' }} onClick={clickStar} />
                    :
                    <HeartTwoTone twoToneColor="#eb2f96" onClick={clickStar} />
                }
              </Space>
            }
          >

            <Descriptions size="small" column={3}>
              <Descriptions.Item label="作者">{previewList[0].author}</Descriptions.Item>
              <Descriptions.Item label="发布时间">
                {
                  previewList[0].publishTime ? formatTime(previewList[0].publishTime) : ' - '
                }
              </Descriptions.Item>
              <Descriptions.Item label="区域">{previewList[0].region}</Descriptions.Item>
              <Descriptions.Item label="访问数量" contentStyle={{ color: 'green' }}>
                {previewList[0].view}
              </Descriptions.Item>
              <Descriptions.Item label="点赞数量" contentStyle={{ color: 'green' }}>
                {previewList[0].star}
              </Descriptions.Item>
              <Descriptions.Item label="评论数量" contentStyle={{ color: 'green' }}>0</Descriptions.Item>
            </Descriptions>
          </PageHeader>

          {/* 文章内容 */}
          <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="新闻内容" key="1" style={{
              overflow: 'auto',
              padding: '0 24px'
            }}>
              <div
                dangerouslySetInnerHTML={{
                  __html: previewList[0].content
                }} />
            </Tabs.TabPane>
          </Tabs>

        </div>
      }
    </Fragment>
  )
}